<!--
  考试参加页面
-->
<template>
  <div class="exam-taking">
    <!-- 考试头部信息栏 -->
    <div class="exam-header" :class="{ 'warning': timeWarning }">
      <div class="exam-info">
        <h2>{{ exam?.title }}</h2>
        <div class="exam-meta">
          <span class="question-info">
            第 {{ currentQuestionIndex + 1 }} / {{ totalQuestions }} 题
          </span>
          <span class="score-info">
            总分：{{ exam?.total_score }} 分
          </span>
        </div>
      </div>
      <div class="timer-section">
        <div class="timer-display" :class="{ 'countdown-warning': timeRemaining < 300 }">
          <el-icon><Clock /></el-icon>
          <span class="time-text">{{ formatTime(timeRemaining) }}</span>
        </div>
        <div class="timer-label">剩余时间</div>
      </div>
    </div>

    <div class="exam-content">
      <!-- 左侧题目区域 -->
      <div class="main-content">
        <!-- 题目导航栏 -->
        <div class="question-navigation">
          <div class="nav-header">
            <h3>答题卡</h3>
            <div class="nav-actions">
              <el-button
                text
                :icon="Grid"
                @click="showQuestionGrid = !showQuestionGrid"
              >
                {{ showQuestionGrid ? '隐藏' : '显示' }}
              </el-button>
            </div>
          </div>
          <div class="question-grid" v-show="showQuestionGrid">
            <div
              v-for="(question, index) in questions"
              :key="question.id"
              class="question-item"
              :class="{
                'answered': isQuestionAnswered(index),
                'current': index === currentQuestionIndex,
                'flagged': isQuestionFlagged(index)
              }"
              @click="goToQuestion(index)"
            >
              <span class="question-number">{{ index + 1 }}</span>
              <el-icon
                v-if="isQuestionFlagged(index)"
                class="flag-icon"
              >
                <Flag />
              </el-icon>
            </div>
          </div>
          <div class="legend">
            <div class="legend-item">
              <div class="legend-color answered"></div>
              <span>已答题</span>
            </div>
            <div class="legend-item">
              <div class="legend-color unanswered"></div>
              <span>未答题</span>
            </div>
            <div class="legend-item">
              <div class="legend-color flagged"></div>
              <span>标记</span>
            </div>
          </div>
        </div>

        <!-- 题目显示区域 -->
        <div class="question-area">
          <el-card class="question-card">
            <!-- 题目内容 -->
            <div class="question-content">
              <div class="question-header">
                <h3 class="question-title">
                  {{ currentQuestionIndex + 1 }}. {{ currentQuestion?.content }}
                </h3>
                <div class="question-meta">
                  <el-tag :type="getDifficultyType(currentQuestion?.difficulty)">
                    {{ currentQuestion?.difficulty }}
                  </el-tag>
                  <span class="question-points">{{ currentQuestion?.points }} 分</span>
                  <el-button
                    text
                    :icon="Flag"
                    @click="toggleFlagQuestion(currentQuestionIndex)"
                    :class="{ flagged: isQuestionFlagged(currentQuestionIndex) }"
                  >
                    标记
                  </el-button>
                </div>
              </div>

              <!-- 题目图片 -->
              <div v-if="currentQuestion?.image_url" class="question-image">
                <img :src="currentQuestion.image_url" alt="题目图片" />
              </div>

              <!-- 选择题选项 -->
              <div v-if="isChoiceQuestion" class="answer-options">
                <el-radio-group
                  v-if="currentQuestion?.question_type === 'single_choice'"
                  v-model="currentAnswer"
                  @change="handleAnswerChange"
                >
                  <div
                    v-for="(option, index) in currentQuestion?.options"
                    :key="index"
                    class="option-item"
                  >
                    <el-radio :label="index.toString()">
                      <div class="option-content">
                        <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                        <span class="option-text">{{ option }}</span>
                      </div>
                    </el-radio>
                  </div>
                </el-radio-group>

                <el-checkbox-group
                  v-else-if="currentQuestion?.question_type === 'multiple_choice'"
                  v-model="currentAnswer"
                  @change="handleAnswerChange"
                >
                  <div
                    v-for="(option, index) in currentQuestion?.options"
                    :key="index"
                    class="option-item"
                  >
                    <el-checkbox :label="index.toString()">
                      <div class="option-content">
                        <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                        <span class="option-text">{{ option }}</span>
                      </div>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>

              <!-- 判断题 -->
              <div v-else-if="currentQuestion?.question_type === 'true_false'" class="true-false-options">
                <el-radio-group v-model="currentAnswer" @change="handleAnswerChange">
                  <div class="tf-option">
                    <el-radio label="true" size="large">
                      <div class="tf-content">
                        <el-icon class="tf-icon"><Check /></el-icon>
                        <span>正确</span>
                      </div>
                    </el-radio>
                  </div>
                  <div class="tf-option">
                    <el-radio label="false" size="large">
                      <div class="tf-content">
                        <el-icon class="tf-icon"><Close /></el-icon>
                        <span>错误</span>
                      </div>
                    </el-radio>
                  </div>
                </el-radio-group>
              </div>

              <!-- 填空题 -->
              <div v-else-if="currentQuestion?.question_type === 'fill_blank'" class="fill-blank-answer">
                <el-input
                  v-model="currentAnswer"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入答案"
                  @input="handleAnswerChange"
                />
                <div class="form-tip">如有多个答案，请用分号(;)分隔</div>
              </div>

              <!-- 简答题 -->
              <div v-else-if="currentQuestion?.question_type === 'essay'" class="essay-answer">
                <el-input
                  v-model="currentAnswer"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入答案"
                  maxlength="1000"
                  show-word-limit
                  @input="handleAnswerChange"
                />
              </div>
            </div>

            <!-- 题目操作按钮 -->
            <div class="question-actions">
              <el-button
                :icon="ArrowLeft"
                @click="previousQuestion"
                :disabled="currentQuestionIndex === 0"
              >
                上一题
              </el-button>
              <div class="action-center">
                <span class="progress-text">
                  {{ currentQuestionIndex + 1 }} / {{ totalQuestions }}
                </span>
                <el-progress
                  :percentage="Math.round(((currentQuestionIndex + 1) / totalQuestions) * 100)"
                  :stroke-width="4"
                  style="width: 200px"
                />
              </div>
              <el-button
                @click="nextQuestion"
                :disabled="currentQuestionIndex === totalQuestions - 1"
              >
                下一题<el-icon><ArrowRight /></el-icon>
              </el-button>
              <el-button
                v-if="currentQuestionIndex === totalQuestions - 1"
                type="primary"
                @click="showSubmitDialog = true"
              >
                提交试卷
              </el-button>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="side-panel" v-if="!showQuestionGrid">
        <div class="panel-section">
          <h3>考试说明</h3>
          <div class="exam-instructions">
            <div class="instruction-item">
              <el-icon><Clock /></el-icon>
              <span>考试时长：{{ exam?.duration }} 分钟</span>
            </div>
            <div class="instruction-item">
              <el-icon><Document /></el-icon>
              <span>总分：{{ exam?.total_score }} 分</span>
            </div>
            <div class="instruction-item">
              <el-icon><Check /></el-icon>
              <span>及格分：{{ exam?.passing_score }} 分</span>
            </div>
          </div>
        </div>

        <div class="panel-section">
          <h3>答题统计</h3>
          <div class="answer-stats">
            <div class="stat-item">
              <div class="stat-number">{{ answeredCount }}</div>
              <div class="stat-label">已答题</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ unansweredCount }}</div>
              <div class="stat-label">未答题</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ flaggedCount }}</div>
              <div class="stat-label">已标记</div>
            </div>
          </div>
        </div>

        <div class="panel-section">
          <h3>快捷操作</h3>
          <div class="quick-actions">
            <el-button
              :icon="ArrowLeft"
              @click="previousQuestion"
              :disabled="currentQuestionIndex === 0"
              style="width: 100%"
            >
              上一题
            </el-button>
            <el-button
              @click="nextQuestion"
              :disabled="currentQuestionIndex === totalQuestions - 1"
              style="width: 100%"
            >
              下一题
            </el-button>
            <el-button
              type="warning"
              :icon="Flag"
              @click="toggleFlagQuestion(currentQuestionIndex)"
              style="width: 100%"
            >
              标记题目
            </el-button>
            <el-button
              type="primary"
              @click="showSubmitDialog = true"
              style="width: 100%"
            >
              提交试卷
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交确认对话框 -->
    <el-dialog
      v-model="showSubmitDialog"
      title="提交确认"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="submit-confirmation">
        <div class="submit-stats">
          <h4>答题情况</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="submit-stat">
                <div class="stat-value answered">{{ answeredCount }}</div>
                <div class="stat-label">已答</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="submit-stat">
                <div class="stat-value unanswered">{{ unansweredCount }}</div>
                <div class="stat-label">未答</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="submit-stat">
                <div class="stat-value flagged">{{ flaggedCount }}</div>
                <div class="stat-label">标记</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div v-if="unansweredCount > 0" class="submit-warning">
          <el-alert
            title="还有未完成的题目"
            description="确定要提交吗？提交后将无法修改答案。"
            type="warning"
            :closable="false"
          />
        </div>

        <div class="submit-note">
          <el-checkbox v-model="confirmSubmit">
            我确认已检查所有答案，并确定提交试卷
          </el-checkbox>
        </div>
      </div>
      <template #footer>
        <el-button @click="showSubmitDialog = false">继续答题</el-button>
        <el-button
          type="primary"
          :disabled="!confirmSubmit"
          :loading="submitting"
          @click="submitExam"
        >
          确认提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores'
import { getExamination, getExamQuestions, submitExamSession } from '@/api/examinations'
import type { Examination, Question } from '@/types'
import {
  Clock,
  Grid,
  Flag,
  Check,
  Close,
  ArrowLeft,
  ArrowRight,
  Document
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const examId = Number(route.params.id)

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const exam = ref<Examination | null>(null)
const questions = ref<Question[]>([])
const answers = ref<Record<number, any>>({})
const flaggedQuestions = ref<Set<number>>(new Set())
const currentQuestionIndex = ref(0)
const showQuestionGrid = ref(false)
const showSubmitDialog = ref(false)
const confirmSubmit = ref(false)
const timeRemaining = ref(0)
const timerInterval = ref<NodeJS.Timeout | null>(null)

// 计算属性
const currentQuestion = computed(() => questions.value[currentQuestionIndex.value])
const totalQuestions = computed(() => questions.value.length)
const currentAnswer = computed({
  get: () => answers.value[currentQuestion.value?.id || 0],
  set: (value) => {
    if (currentQuestion.value) {
      answers.value[currentQuestion.value.id] = value
    }
  }
})

const isChoiceQuestion = computed(() => {
  return ['single_choice', 'multiple_choice'].includes(currentQuestion.value?.question_type || '')
})

const answeredCount = computed(() => {
  return Object.keys(answers.value).filter(id => {
    const answer = answers.value[Number(id)]
    return answer !== null && answer !== undefined && answer !== ''
  }).length
})

const unansweredCount = computed(() => totalQuestions.value - answeredCount.value)
const flaggedCount = computed(() => flaggedQuestions.value.size)
const timeWarning = computed(() => timeRemaining.value < 300) // 5分钟警告

// 加载考试信息
const loadExamInfo = async () => {
  try {
    const response = await getExamination(examId)
    exam.value = response.data

    // 检查考试状态
    if (exam.value.status !== 'ongoing') {
      ElMessage.error('考试尚未开始或已结束')
      router.push('/examinations/list')
      return
    }
  } catch (error) {
    console.error('Failed to load exam:', error)
    ElMessage.error('加载考试信息失败')
    router.push('/examinations/list')
  }
}

// 加载考试题目
const loadExamQuestions = async () => {
  loading.value = true
  try {
    const response = await getExamQuestions(examId)
    questions.value = response.data

    if (questions.value.length === 0) {
      ElMessage.error('该考试没有题目')
      router.push('/examinations/list')
      return
    }

    startTimer()
  } catch (error) {
    console.error('Failed to load questions:', error)
    ElMessage.error('加载题目失败')
  } finally {
    loading.value = false
  }
}

// 开始计时器
const startTimer = () => {
  if (!exam.value) return

  const startTime = new Date()
  const endTime = new Date(startTime.getTime() + exam.value.duration * 60000)

  timerInterval.value = setInterval(() => {
    const now = new Date()
    const remaining = Math.max(0, Math.floor((endTime.getTime() - now.getTime()) / 1000))
    timeRemaining.value = remaining

    if (remaining === 0) {
      // 时间到，自动提交
      clearInterval(timerInterval.value!)
      ElMessage.warning('考试时间到，自动提交试卷')
      autoSubmit()
    }
  }, 1000)
}

// 处理答案变化
const handleAnswerChange = () => {
  // 自动保存答案到本地存储
  saveAnswersToStorage()
}

// 跳转到指定题目
const goToQuestion = (index: number) => {
  currentQuestionIndex.value = index
  showQuestionGrid.value = false
}

// 上一题
const previousQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

// 下一题
const nextQuestion = () => {
  if (currentQuestionIndex.value < totalQuestions.value - 1) {
    currentQuestionIndex.value++
  }
}

// 标记题目
const toggleFlagQuestion = (index: number) => {
  if (flaggedQuestions.value.has(index)) {
    flaggedQuestions.value.delete(index)
  } else {
    flaggedQuestions.value.add(index)
  }
}

// 检查题目是否已答题
const isQuestionAnswered = (index: number) => {
  const question = questions.value[index]
  const answer = answers.value[question.id]
  return answer !== null && answer !== undefined && answer !== ''
}

// 检查题目是否已标记
const isQuestionFlagged = (index: number) => {
  return flaggedQuestions.value.has(index)
}

// 自动保存答案
const saveAnswersToStorage = () => {
  const storageData = {
    examId,
    answers: answers.value,
    flaggedQuestions: Array.from(flaggedQuestions.value),
    currentQuestionIndex: currentQuestionIndex.value
  }
  localStorage.setItem(`exam_${examId}_progress`, JSON.stringify(storageData))
}

// 从本地存储加载进度
const loadProgressFromStorage = () => {
  try {
    const storageData = localStorage.getItem(`exam_${examId}_progress`)
    if (storageData) {
      const data = JSON.parse(storageData)
      answers.value = data.answers || {}
      flaggedQuestions.value = new Set(data.flaggedQuestions || [])
      currentQuestionIndex.value = data.currentQuestionIndex || 0
    }
  } catch (error) {
    console.error('Failed to load progress:', error)
  }
}

// 清除本地存储
const clearProgressFromStorage = () => {
  localStorage.removeItem(`exam_${examId}_progress`)
}

// 自动提交
const autoSubmit = async () => {
  try {
    await submitExam()
  } catch (error) {
    console.error('Auto submit failed:', error)
  }
}

// 提交考试
const submitExam = async () => {
  submitting.value = true
  try {
    const examAnswers = Object.entries(answers.value).map(([questionId, answer]) => ({
      question: Number(questionId),
      answer: typeof answer === 'string' ? answer : JSON.stringify(answer),
      time_spent: 0 // 可以计算每道题的答题时间
    }))

    await submitExamSession(examId, { answers: examAnswers })

    ElMessage.success('试卷提交成功')
    clearProgressFromStorage()
    router.push(`/examinations/${examId}/result`)
  } catch (error) {
    console.error('Failed to submit exam:', error)
    ElMessage.error('提交失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 格式化时间
const formatTime = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`
}

// 获取难度类型
const getDifficultyType = (difficulty?: string) => {
  const types: Record<string, string> = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return types[difficulty || ''] || 'info'
}

// 防止误操作
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
  e.preventDefault()
  e.returnValue = '考试进行中，确定要离开吗？'
}

// 页面挂载时
onMounted(async () => {
  // 防止刷新或关闭页面
  window.addEventListener('beforeunload', handleBeforeUnload)

  await loadExamInfo()
  await loadExamQuestions()
  loadProgressFromStorage()
})

// 页面卸载时
onUnmounted(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload)

  if (timerInterval.value) {
    clearInterval(timerInterval.value)
  }

  // 保存当前进度
  if (exam.value && exam.value.status === 'ongoing') {
    saveAnswersToStorage()
  }
})
</script>

<style scoped lang="scss">
.exam-taking {
  min-height: 100vh;
  background: var(--el-bg-color-page);

  .exam-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--el-bg-color);
    border-bottom: 2px solid var(--el-border-color);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;

    &.warning {
      background: var(--el-color-warning-light-9);
      border-bottom-color: var(--el-color-warning);
    }

    .exam-info {
      h2 {
        font-size: 20px;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
      }

      .exam-meta {
        display: flex;
        gap: 24px;
        font-size: 14px;
        color: var(--el-text-color-regular);

        .question-info {
          font-weight: 500;
        }

        .score-info {
          color: var(--el-color-primary);
        }
      }
    }

    .timer-section {
      text-align: center;

      .timer-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 4px;

        &.countdown-warning {
          color: var(--el-color-danger);
          animation: pulse 1s infinite;
        }

        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      }

      .timer-label {
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
    }
  }

  .exam-content {
    display: flex;
    padding: 24px;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;

    .main-content {
      flex: 1;

      .question-navigation {
        background: white;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);

        .nav-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          h3 {
            font-size: 16px;
            margin: 0;
          }
        }

        .question-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
          gap: 8px;
          margin-bottom: 16px;

          .question-item {
            width: 40px;
            height: 40px;
            border: 2px solid var(--el-border-color);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;

            &:hover {
              transform: scale(1.1);
            }

            &.answered {
              background: var(--el-color-success-light-8);
              border-color: var(--el-color-success);
              color: var(--el-color-success);
            }

            &.current {
              background: var(--el-color-primary);
              border-color: var(--el-color-primary);
              color: white;
            }

            &.flagged {
              border-color: var(--el-color-warning);
            }

            .question-number {
              font-size: 14px;
              font-weight: 500;
            }

            .flag-icon {
              position: absolute;
              top: -4px;
              right: -4px;
              font-size: 12px;
              color: var(--el-color-warning);
            }
          }
        }

        .legend {
          display: flex;
          gap: 16px;
          font-size: 12px;

          .legend-item {
            display: flex;
            align-items: center;
            gap: 4px;

            .legend-color {
              width: 12px;
              height: 12px;
              border-radius: 2px;

              &.answered {
                background: var(--el-color-success);
              }

              &.unanswered {
                background: var(--el-border-color);
              }

              &.flagged {
                background: var(--el-color-warning);
              }
            }
          }
        }
      }

      .question-area {
        .question-card {
          .question-content {
            .question-header {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              margin-bottom: 20px;

              .question-title {
                font-size: 18px;
                color: var(--el-text-color-primary);
                margin: 0;
                line-height: 1.6;
                flex: 1;
              }

              .question-meta {
                display: flex;
                align-items: center;
                gap: 12px;
                flex-shrink: 0;

                .question-points {
                  font-size: 14px;
                  color: var(--el-color-primary);
                  font-weight: 500;
                }

                .el-button.flagged {
                  color: var(--el-color-warning);
                }
              }
            }

            .question-image {
              margin-bottom: 20px;
              text-align: center;

              img {
                max-width: 100%;
                max-height: 300px;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
              }
            }

            .answer-options {
              .option-item {
                margin-bottom: 16px;
                padding: 12px;
                border: 1px solid var(--el-border-color-light);
                border-radius: 8px;
                transition: all 0.3s;

                &:hover {
                  border-color: var(--el-color-primary);
                  background: var(--el-color-primary-light-9);
                }

                .option-content {
                  display: flex;
                  align-items: flex-start;

                  .option-label {
                    font-weight: 500;
                    margin-right: 8px;
                    color: var(--el-text-color-primary);
                  }

                  .option-text {
                    flex: 1;
                    line-height: 1.5;
                  }
                }
              }
            }

            .true-false-options {
              .tf-option {
                margin-bottom: 16px;

                .tf-content {
                  display: flex;
                  align-items: center;
                  gap: 8px;

                  .tf-icon {
                    font-size: 20px;
                  }
                }
              }
            }

            .fill-blank-answer,
            .essay-answer {
              .form-tip {
                font-size: 12px;
                color: var(--el-text-color-regular);
                margin-top: 8px;
              }
            }

            .question-actions {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 24px;
              padding-top: 20px;
              border-top: 1px solid var(--el-border-color-light);

              .action-center {
                display: flex;
                align-items: center;
                gap: 12px;

                .progress-text {
                  font-size: 14px;
                  color: var(--el-text-color-regular);
                }
              }
            }
          }
        }
      }
    }

    .side-panel {
      width: 280px;

      .panel-section {
        background: white;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);

        h3 {
          font-size: 16px;
          margin: 0 0 16px 0;
          color: var(--el-text-color-primary);
        }

        .exam-instructions {
          .instruction-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--el-text-color-regular);
          }
        }

        .answer-stats {
          display: flex;
          justify-content: space-around;

          .stat-item {
            text-align: center;

            .stat-number {
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 4px;

              &.answered { color: var(--el-color-success); }
              &.unanswered { color: var(--el-color-warning); }
              &.flagged { color: var(--el-color-danger); }
            }

            .stat-label {
              font-size: 12px;
              color: var(--el-text-color-regular);
            }
          }
        }

        .quick-actions {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .exam-taking {
    .exam-content {
      flex-direction: column;

      .side-panel {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;

        .panel-section {
          margin-bottom: 0;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .exam-taking {
    .exam-header {
      flex-direction: column;
      gap: 12px;
      padding: 12px 16px;

      .exam-info {
        text-align: center;

        .exam-meta {
          justify-content: center;
        }
      }
    }

    .exam-content {
      padding: 16px;
      gap: 16px;

      .main-content {
        .question-navigation {
          .question-grid {
            grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
          }
        }

        .question-area {
          .question-card {
            .question-content {
              .question-header {
                flex-direction: column;
                gap: 12px;
              }

              .question-actions {
                flex-direction: column;
                gap: 12px;

                .action-center {
                  width: 100%;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>